<template>
	<view class="user-index-page uu-user-top">
		
		<view style="padding: 0 24rpx;">
			<view class="user-content">
				<image v-if="isLogin" :src="userInfo.avatar"></image>
				<image v-else-if="appType == 1" src="../../static/images/ic-defult-avatar1.png"></image>
				<image v-else-if="appType == 2" src="../../static/images/ic-defult-avatar2.png"></image>
				<image v-else src="../../static/images/ic-defult-avatar.png"></image>
				<view class="not-login" v-if="!isLogin" @click="login">立即登录</view>
				<view v-else class="has-login">
					<navigator url="/pages/lease/personal_Info" class="name" hover-class="none">{{userInfo.nickname}}</navigator>
					<!-- <navigator url="/pages/lease/mine_integral" class="integral" hover-class="none">
						<image src="../../static/images/icon/coin.png"></image>
						<text>7486</text>
					</navigator> -->
				</view>
				<view class="message" @click="goMenuPage('/pages/lease/msg-list')">
					<view class="msg-count">
						<view class="count" v-if="userInfo.msg_no_read > 0">{{userInfo.msg_no_read}}</view>
						<image src="../../static/images/icon/bell.png"></image>
					</view>
				</view>
			</view>
			
			<view class="user-info-wrpper">
				<view class="left" @click="goMenuPage('/pages/users/user_coupon/index')">
					<image class="img" src="https://oss.jingyinmao.cn/attach/2023/07/b056b202307271602318025.png"></image>
					<view class="content-wrapper">
						<view class="title">我的优惠券</view>
						<view><text class="num">{{ userInfo.coupon_num || 0 }}</text>张</view>
						<view class="content">可用于还款抵扣</view>
					</view>
				</view>
				
				<view class="right" @click="goMenuPage('/pages/lease/my-bill')">
					<image class="img" src="https://oss.jingyinmao.cn/attach/2023/07/5769c202307271604307818.png"></image>
					<view class="content-wrapper">
						<view class="title">我的账单</view>
						<view><text class="num">{{ userInfo.wait_num || 0 }}</text>条</view>
						<view class="content">查看账单情况</view>
					</view>
				</view>
			</view>
			
			
			<!-- <view class="section-box">
				<view class="head">
					<view class="title">租赁订单</view>
					<view class="read-more" @click="goMenuPage('/pages/goods/order_list/index?status=')">
						<text>全部订单</text>
						<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
					</view>
				</view>
				
				<view class="list">
					<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=11')">
						<view class="pic">
							<image src="../../static/images/ic-dsh.png"></image>
						</view>
						<view class="name">待审核</view>
					</view>
					<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=0')">
						<view class="pic">
							<image src="../../static/images/ic-dfk.png"></image>
						</view>
						<view class="name">待付款</view>
					</view>
					<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=12')">
						<view class="pic">
							<image src="../../static/images/ic-dfh.png"></image>
						</view>
						<view class="name">待发货</view>
					</view>
					<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=2')">
						<view class="pic">
							<image src="../../static/images/ic-sh.png"></image>
						</view>
						<view class="name">待收货</view>
					</view>
				</view>
			</view> -->
			
			<view class="user-ad" @click="goMenuPage('/pages/lease/share_user')">
				<image src="https://oss.jingyinmao.cn/attach/2023/07/975cc202307271607313371.png"></image>
			</view>
			
			
			<!-- <view class="uu-box">
				<view class="uu-list">
					
					<view v-if="isLogin && userInfo && userInfo.is_credit" @click="gotUserCredit()" class="uu-item bottom-line">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel-c.png"></image>
							</view>
							<view class="name">待签授权书</view>
						</view>
						<view style="display: flex;">
							<view v-if="isLogin && userInfo">
								<view v-if="isLogin && userInfo.credit_status" style="color: #999;">查看</view>
								<view v-else style="color: #FF1F2E;">立即去填写</view>
							</view>
							<image style="height: 30rpx;width: 30rpx;margin-left: 16rpx;" src="../../static/images/icon-right.png"></image>
						</view>
					</view>
					
					<view @click="goMenuPage('/pages/lease/share_user')" class="uu-item bottom-line">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel4.png"></image>
							</view>
							<view class="name">推荐好友</view>
						</view>
						<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
					</view>
					
					<view @click="goMenuPage('/pages/users/user_address_list/index')" class="uu-item bottom-line">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel5.png"></image>
							</view>
							<view class="name">收货地址</view>
						</view>
						<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
					</view>
					
					<view @click="goMenuPage('/pages/lease/real-name')" class="uu-item bottom-line">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel2.png"></image>
							</view>
							<view class="name">实名认证</view>
						</view>
						
						<view style="display: flex;">
							<view v-if="isLogin && userInfo">
								<view v-if="isLogin && userInfo.is_attestation" style="color: #999;">已实名</view>
								<view v-else style="color: #FF1F2E;">实名后可更快出审核结果</view>
							</view>
						
							<image style="height: 30rpx;width: 30rpx;margin-left: 16rpx;" src="../../static/images/icon-right.png"></image>
						</view>
						
					</view>
					
					<navigator url="/pages/lease/flow-path" class="uu-item bottom-line" hover-class="none">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel7.png"></image>
							</view>
							<view class="name">租机流程</view>
						</view>
						<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
					</navigator>
					
					<view @click="goMenuPage('/pages/lease/service')" class="uu-item bottom-line">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel9.png"></image>
							</view>
							<view class="name">客服&建议</view>
						</view>
						<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
					</view>
					
					<navigator url="/pages/lease/about_us" class="uu-item bottom-line" hover-class="none">
						<view class="left">
							<view class="pic">
								<image src="../../static/images/ic-channel10.png"></image>
							</view>
							<view class="name">关于我们</view>
						</view>
						<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
					</navigator>
				</view>
			</view> -->
			
			<view class="section-box">
				<view class="head">
					<view class="title">更多服务</view>
				</view>
				
				<view class="list">
					
					<view @click="goMenuPage('/pages/users/user_address_list/index')" class="item">
						<view class="pic">
							<image src="../../static/images/ic-channel555.png"></image>
						</view>
						<view class="name">收货地址</view>
					</view>
					
					<view @click="goMenuPage('/pages/lease/real-name')" class="item" style="position: relative;">
						<view class="pic">
							<image src="../../static/images/ic-channel222.png"></image>
						</view>
						<view class="name">实名认证</view>
						
						<image v-if="isLogin && userInfo && !userInfo.is_attestation" class="user-is-auth" src="../../static/images/user-is-auth.png"></image>
						
					</view>
					
					<navigator url="/pages/lease/service" class="item" hover-class="none">
						<view class="pic">
							<image src="../../static/images/ic-channel999.png"></image>
						</view>
						<view class="name">客服&建议</view>
					</navigator>
					
				<!-- 	 <view @click="goMenuPage('/pages/lease/my-bankcard')" class="item" >
						<view class="pic">
							<image src="../../static/images/ic-channel3.png"></image>
						</view>
						<view class="name">我的银行卡</view>
					</view> -->
				<!-- 	<view @click="goMenuPage('/pages/lease/share_user')" class="item">
						<view class="pic">
							<image src="../../static/images/ic-channel4.png"></image>
						</view>
						<view class="name">推荐好友</view>
					</view> -->
					
				<!-- 	<view @click="goMenuPage('/pages/lease/linkman')" class="item" >
						<view class="pic">
							<image src="../../static/images/ic-channel6.png"></image>
						</view>
						<view class="name">紧急联系人</view>
					</view> -->
				
					<navigator url="/pages/lease/flow-path" class="item" hover-class="none">
						<view class="pic">
							<image src="../../static/images/ic-channel777.png"></image>
						</view>
						<view class="name">租机流程</view>
					</navigator>
				
					<navigator url="/pages/lease/about_us" class="item" hover-class="none">
						<view class="pic">
							<image src="../../static/images/ic-channel1011.png"></image>
						</view>
						<view class="name">关于我们</view>
					</navigator>
				</view>
			</view>
			
		</view>
		
		
		
		<view class="recommend-title acea-row row-center-wrapper">
			为您推荐
		</view>
		
		<view class="rec-list waterList" v-if="list.length > 0">
			<waterfallsFlow ref="waterfallsFlow" :list="list" @wapper-lick="goDetail">
				<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
					<view class="waterfalls">
						<view class='name line2'>
							<span class="tit-tag app-label" v-if="item.dis_old == 100">
								全新
							</span>
							<span v-else class="tit-tag app-label">
								{{item.dis_old}}新
							</span>
							{{item.store_name}}	
						</view>
						
						<view class="flex price-box">
							<view class="info-price flex">
								<view class="price-icon">
									¥
								</view>
								{{ item.min_day_price }}
								<view class="price-unit">
									/天
								</view>
							</view>
						</view>
						
						<view class="serve-box flex">
							<view class="serve-li uu-label">
								顺丰包邮
							</view>
							<!-- <view class="serve-li uu-label">
								租完归还
							</view> -->
						</view>
					</view>
				</view>
			</waterfallsFlow>
			
		</view>
		
		
		
		<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
	</view>
</template>

<script>
	let app = getApp();
	import store from "../../store";
	import {
		getUserCredit,
		getUserInfo,
		getNoReadCount
	} from '@/api/user.js';
	import { productYanxuan } from "@/api/brandHall.js"
	import {
		mapGetters
	} from "vuex";
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		computed: mapGetters(['isLogin']),
		components: {
			waterfallsFlow	
		},
		data() {
			return {
				appType: app.globalData.appType,
				isShowAuth: false, //是否隐藏授权
				userInfo: null,
				list: [],
				productList: [],
			}
		},
		onLoad() {
			this.getProductYanxuan()
			// this.getGoodsList();
		},
		
		onShow() {
			let that = this;
			if (this.isLogin) {
				getUserInfo().then(res => {
					that.userInfo = res.data
				})
				
				if (this.appType == 1) {
					getNoReadCount().then(res => {
						if (res.data[0] > 0) {
							uni.showTabBarRedDot({
								index: 2
							})
						} else {
							uni.hideTabBarRedDot({
								index: 2
							})
						}
					})
				}
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/goods_details/index?id=' + item.id
				});
			},
			getProductYanxuan() {
				productYanxuan().then(res => {
					this.list = res.data.list;
				})
			},
			goSpu() {
				
				if (this.list.length > 0) {
					const id = this.list[0].id
					uni.navigateTo({
						url: '/pages/goods_details/index?id=' + id
					})
				}
				// uni.navigateTo({
				// 	url: "/pages/module/new"
				// })
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			login() {
				this.isShowAuth = true;
			}, 
			user() {
				my.getAuthUserInfo({
					success: (res) => {
						console.log(res)
					},
					fail: err => console.log(err)
				})
					
			},
			onLoadFun() {
				console.log('onLoadFun')
				this.getUserInfo();
				this.isShowAuth = false
			},
			/**
			 * 获取用户信息
			 * 
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					if (that.appType == 1) {
						if (that.userInfo.msg_no_read > 0) {
							uni.showTabBarRedDot({
								index: 2
							})
						} else {
							uni.hideTabBarRedDot({
								index: 2
							})
						}
					}
				})
			},
			goMenuPage(url) {
				if (this.isLogin) {
					
						// store.commit("LOGOUT");
					
					uni.navigateTo({
						url: url
					})
				} else {
					this.isShowAuth = true;
				}
			},
			gotUserCredit() {
				uni.showLoading({
					title: '加载中'
				})
				getUserCredit().then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: `/pages/annex/web_view/index?url=${res.data.contract_url}`
						});
					} else {
						uni.hideLoading()
						return that.$util.Tips({
							title: res.msg
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background-color: #F5F7FA; }
	.user-index-page {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230514/3f564154bd9e114000ba90ad91834f97.png');
		background-size: 100%;
		background-color: #F5F7FA;
		background-repeat: no-repeat;
		padding: 224rpx 0 48rpx 0;
		
		.user-content {
			display: flex;
			align-items: center;
			
			image {
				width: 104rpx;
				height: 104rpx;
				border-radius: 52rpx;
			}
			
			.not-login {
				flex: 1;
				margin-left: 24rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
			
			.has-login {
				flex: 1;
				margin-left: 24rpx;
				
				.name {
					margin-top: 8rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 40rpx;
				}
				
				.integral {
					display: inline-block;
					padding: 4rpx 6rpx;
					margin-top: 16rpx;
					background: rgba(255,255,255,0.4);
					height: 32rpx;
					border-radius: 16rpx;
					border: 1rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					
					image {
						width: 24rpx;
						height: 24rpx;
					}
					
					text {
						margin: 0 4rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #FF9233;
					}
				}
			}
			
			.message {
				text-align: right;
				
				.msg-count {
					position: relative;
					width: 72rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.count {
						position: absolute;
						right: 0;
						top: 0;
						line-height: 30rpx;
						width: 30rpx;
						font-size: 24rpx;
						border-radius: 15rpx;
						color: #fff;
						background-color: #FF271F;
						text-align: center;
					}
					
					image {
						display: inline-block;
						width: 56rpx;
						height: 56rpx;
					}
				}
				
				
			}
		}
	
		.num-content {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			width: 100%;
			height: 144rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.left-box {
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				
				.item {
					flex: 1;
					// width: 144rpx;
					text-align: center;
					
					.num {
						font-size: 40rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 40rpx;
					}
					
					.name {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
					}
				}
			}
			
			.line {
				width: 2rpx;
				height: 48rpx;
				background: #D8D8D8;
			}
			
			.right-box {
				width: 172rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				
				image {
					margin: 0 auto;
					width: 40rpx;
					height: 40rpx;
				}
				
				.name {
					width: 100%;
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
					text-align: center;
				}
			}
		}
	
		.user-ad {
			margin-top: 24rpx;
			width: 100%;
			height: 176rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	
	
		.uu-box {
			padding: 0 24rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
	
		.section-box {
			padding: 32rpx 0;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 24rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 32rpx;
				}
				
				.read-more {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					display: flex;
					align-items: center;
					
					.icon-right {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		
			.list {
				display: flex;
				flex-wrap: wrap;
				
				.item20 {
					margin-top: 32rpx;
					width: 33.3%;
					text-align: center;
					
					.pic {
						margin: 0 auto;
						width: 80rpx;
						height: 80rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.name {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
						line-height: 24rpx;
					}
				}
				
				
				.item {
					margin-top: 32rpx;
					width: 33.3%;
					text-align: center;
					
					.pic {
						margin: 0 auto;
						width: 80rpx;
						height: 80rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.name {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
						line-height: 24rpx;
					}
				}
			}
		}
	}
	
	.uu-list {
		.uu-item {
			height: 120rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				.pic {
					width: 48rpx;
					height: 48rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.name {
					font-size: 28rpx;
					color: #1F1F1F;
					margin-left: 30rpx;
				}
				
			}
			
			.icon-right {
				width: 28rpx;
				height: 28rpx;
			} 
		}
	}
	
	.bottom-line {
		border-bottom: 1px solid #F5F5F5;
	}
	
	.recommend-title {
		height: 88rpx;
		color: #1F1F1F;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.rec-list {
		padding: 0 20rpx;
		
		.waterfalls {
			padding: 10rpx 16rpx 16rpx 16rpx;
			color: #222;
			
			
			.tit-tag {
				padding: 0rpx 7rpx;
				background: linear-gradient(180deg, #FF9D5C 0%, #FF7847 100%);
				border-radius: 20rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 10rpx;
			}
			
			
			// .waterfalls-tit {
			// 	.tit-tag {
			// 		padding: 0rpx 7rpx;
			// 		background: linear-gradient(180deg, #FF9D5C 0%, #FF7847 100%);
			// 		border-radius: 20rpx;
			// 		font-size: 24rpx;
			// 		font-family: PingFangSC-Medium, PingFang SC;
			// 		font-weight: 500;
			// 		color: #FFFFFF;
			// 		margin-right: 10rpx;
			// 	}
			// }
			.info-lable-box {
				margin-top: 16rpx;
				.lable-li {
					width: 112rpx;
					height: 40rpx;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 24rpx;
					text-align: center;
					line-height: 40rpx;
				}
				.li-cor0 {
					background: rgba(255,145,71,0.08);
					color: #FF9147;
					margin-right: 10rpx;
				}
				.li-cor1 {
					background: rgba(255,96,71,0.08);
					color: #FF3D1F;
				}
				flex-wrap: wrap;
			}
			.price-box {
				margin-top: 16rpx;
				.info-price {
					.price-icon {
						font-size: 28rpx;
						position: relative;
						top: 5rpx;
					}
					.price-unit {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 24rpx;
					}
					color: #FF1F2E;
					margin-top: 10rpx;
					align-items: flex-end;
					font-size: 40rpx;
					font-family: D-DIN-Bold, D-DIN;
					font-weight: bold;
					line-height: 30rpx;
					margin-right: 15rpx;
				}
			}
			.serve-box {
				margin-top: 20rpx;
				.serve-li {
					width: 104rpx;
					height: 32rpx;
					background: rgba(110,184,179,0.12);
					border-radius: 4rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #6EB8B3;
					line-height: 32rpx;
					text-align: center;
					&:first-child {
						margin-right: 10rpx;
					}
				}
			}
			.name {
				font-size: 28rpx;
			}
		
			.label {
				font-size: 20rpx;
				color: var(--view-theme);
				border-radius: 4rpx;
				border: 1px solid var(--view-theme);
				padding: 0 6rpx;
				display: inline-block;
				margin-top: 10rpx;
				margin-right: 10rpx;
			}
		
			.money {
				font-size: 26rpx;
				font-weight: 700;
		
				.num {
					font-size: 34rpx;
				}
		
				.nums {
					font-size: 28rpx;
				}
			}
		
			.vip {
				font-size: 22rpx;
				color: #aaa;
				margin-top: 6rpx;
		
				.vip-money {
					font-size: 24rpx;
					color: #282828;
					font-weight: bold;
		
					image {
						width: 46rpx;
						height: 21rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
	}
	
	.user-info-wrpper {
		margin-top: 48rpx;
		display: flex;
		justify-content: space-between;
		
		.left {
			width: 340rpx;
			height: 176rpx;
			position: relative;
			font-size: 24rpx;
			color: #7296CC;
			
			.img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			
			.content-wrapper {
				position: relative;
				margin-left: 16rpx;
				margin-top: 12rpx;
			}
			
			
			.title {
				color: #999999;
				margin-bottom: 16rpx;
			}
			
			.num {
				font-size: 48rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
			
			.content {
				margin-top: 16rpx;
			}
			
		}
		
		.right {
			width: 340rpx;
			height: 176rpx;
			position: relative;
			font-size: 24rpx;
			color: #72A8CC;
			
			.img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.content-wrapper {
				position: relative;
				margin-left: 16rpx;
				margin-top: 12rpx;
			}
			
			.title {
				color: #999999;
				margin-bottom: 16rpx;
			}
			
			.num {
				font-size: 48rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
			
			.content {
				margin-top: 16rpx;
			}
			
		}
	}
	
	.user-is-auth {
		width: 112rpx;
		height: 40rpx;
		position: absolute;
		top: -24rpx;
		left: 50%;
		margin-left: -56rpx;
		
	}
	
	
</style>
